<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
        <ul class="list two" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
    </div>
</body>
<script>
    //传入一个css选择器(css2 css3 => 字符串)
    // document.querySelector(selector);    单元素获取，单个元素 =>直接返回  多个元素 => 默认返回
    // document.querySelectorAll(selector);  多元素获取 => 集合； 即便只有一个也会放到集合中(id也是如此)

    // 单元素获取
    var wrap = document.querySelector("#wrap");
    console.log(wrap);

    // query 查询
    // selector 选择器

    var list = document.querySelectorAll(".list");
    console.log(list);

    var li = document.querySelectorAll(".two>#first");
    console.log(li)
</script>
</html>